<template>
  <el-card class="top-search content-card">
    <template #header>
      <span>热门搜索</span>
      <div class="card-header-extra">
        <el-dropdown class="dropdown-options">
          <span class="title-tip-icon"><Icon icon="ri:more-line" /></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>操作一</el-dropdown-item>
              <el-dropdown-item>操作二</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>

    <el-row :gutter="16" class="user-search">
      <el-col :span="12">
        <div class="user-search-info">
          <span>搜索用户数</span>
          <el-tooltip effect="dark" content="指标说明" placement="top">
            <span class="title-tip-icon">
              <Icon icon="ant-design:info-circle-outlined" />
            </span>
          </el-tooltip>
        </div>
        <div class="user-search-chart">
          <VChart :loading="useSearchLoading" :option="option" autoresize />
        </div>
      </el-col>

      <el-col :span="12" class="user-search-info">
        <div class="user-search-info">
          <span>人均搜索次数</span>
          <el-tooltip effect="dark" content="指标说明" placement="top">
            <span class="title-tip-icon">
              <Icon icon="ant-design:info-circle-outlined" />
            </span>
          </el-tooltip>
        </div>
        <div class="user-search-chart">
          <VChart :loading="useSearchLoading" :option="option" autoresize /></div
      ></el-col>
    </el-row>

    <div class="top-search-table">
      <ProTable
        ref="tableRef"
        row-key="id"
        :request="requestApi"
        :columns="columns"
        :pagination="{
          pageSize: 5,
        }"
        :toolbar="false"
        header-cell-class-name="table-header-cell"
        :pagination-props="{
          size: 'small',
          layout: 'prev, pager, next',
        }"
      >
        <!-- 表格列 -->
        <template #keyword="scope">
          <el-button type="primary" link size="small">
            {{ scope.row.keyword }}
          </el-button>
        </template>
        <template #range="scope">
          <Trend :flag="scope.row.status === 1 ? 'up' : 'down'"> {{ scope.row.range }}% </Trend>
        </template>
      </ProTable>
    </div>
  </el-card>
</template>
<script setup>
import { computed, ref } from 'vue'
import useLoading from '@/hooks/use-loading'
import { getTopSearchData, getSearchUserData } from '@/api/dashboard'
import { Icon } from '@iconify/vue'
import Trend from '@/components/trend/index.vue'
import VChart from 'vue-echarts'
import { ProTable } from '@/components/table/index.js'
import { ElMessage } from 'element-plus'

const [useSearchLoading, setUseSearchLoading] = useLoading(true)
const optionData = ref([[], []])

// =========================== 搜索用户 =======================
const option = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: optionData.value[0],
      boundaryGap: false,
      show: false,
      axisPointer: {
        show: true,
        lineStyle: {
          color: '#c6e2ff',
          width: 1,
        },
      },
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    series: [
      {
        name: '',
        data: optionData.value[1],
        type: 'line',
        smooth: true, //平滑处理
        symbolSize: 2, //标记的大小，
        lineStyle: {
          width: 1,
          color: '#409eff',
        },
        emphasis: {
          disabled: true, //关闭高亮状态可以在鼠标移到图形上，tooltip 触发，
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: '#ecf5ff',
        },
      },
    ],
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  }
})
const fetchUseSearchDataList = async () => {
  setUseSearchLoading(true)
  try {
    const { data } = await getSearchUserData()
    data.data.forEach(({ x, y }) => {
      optionData.value[0].push(x)
      optionData.value[1].push(y)
    })
  } catch (err) {
    console.error('请求异常', err)
  } finally {
    setUseSearchLoading(false)
  }
}
fetchUseSearchDataList()

// =========================== 表格 =======================

const columns = computed(() => [
  { type: 'index', label: '排名', 'min-width': 55 },
  {
    prop: 'keyword',
    slotName: 'keyword',
    label: '搜索关键词',
    'min-width': 120,
  },
  { prop: 'userNum', label: '用户数', 'min-width': 70 },
  { slotName: 'range', prop: 'range', label: '涨幅', 'min-width': 70 },
])
const requestApi = async (params) => {
  try {
    const {
      data: { list, total },
      msg,
    } = await getTopSearchData(params)
    return Promise.resolve({
      data: list,
      total,
      msg,
      success: true,
    })
  } catch (err) {
    ElMessage.error('数据请求失败!')
    throw new Error(`数据请求失败: ${err.message || err}`)
  }
}
</script>

<style scoped lang="scss">
.top-search {
  height: 100%;
  :deep(.el-card__header) {
    line-height: 32px;
  }
  .user-search {
    .user-search-info {
      height: 22px;
      line-height: 22px;
      color: var(--el-text-color-regular);
      .title-tip-icon {
        margin-left: 6px;
        vertical-align: -0.22rem;
      }
    }
    .user-search-chart {
      height: 60px;
      width: 100%;
      margin-top: 2px;
    }
  }

  .top-search-table {
    margin-top: 12px;
    :deep(.pro-table) {
      .el-table {
        .table-header-cell {
          font-size: 13px;
          color: var(--el-text-color-regular);
        }
        .el-table__body {
          td {
            padding: 6px 0;
            .cell {
              font-size: 12px;
            }
          }
        }
      }

      .el-pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 10px;
      }
    }
  }
}
</style>
